<template>
	<view class="goshop-release-container">
		<u-toast ref="uToast"></u-toast>
		 <u-navbar
		     class="goshop-release-navbar"
			:title="title"
			:bgColor="bgColor"
			:titleStyle="{'font-weight':700,'color':'#fff'}"
			@rightClick="rightClick"
			:autoBack="true"
		>
		</u-navbar>
		<view>
			<view class="u-p-10">
				<u--textarea border="none" v-model="form.name" confirmType="done" ref="titleTextarea" height="20" :placeholder="filltitleText" count maxlength="50"></u--textarea>
			</view>
			<view class="u-p-10">
				<u--textarea border="none" v-model="form.content" confirmType="done" ref="contentTextarea" height="130" :placeholder="descText" count maxlength="90"></u--textarea>
			</view>
			<view class="u-p-10">
				<view class="goshop-release-upload">
					<u-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							multiple
							:maxCount="3"
						></u-upload>
				</view>
			</view>
			<view class="u-p-10">
				<view class="goshop-release-category">
					<view class="goshop-release-category-list">
						<view class="goshop-release-category-item">
							<view class="goshop-release-category-item-left">
								<view class="iconfont iconfont-category icon-img-24"></view>
								<view class="u-m-l-10">{{categoryText}}</view>
							</view>
							<view class="goshop-release-category-item-right" @tap="showCategory = true">
								{{selectCategory?selectCategory:this.chooseText}}
								<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
							</view>
						</view>
						<view class="goshop-release-category-item">
							<view class="goshop-release-category-item-left">
								<view class="iconfont iconfont-price icon-img-24"></view>
								<view class="u-m-l-10">{{priceText}}</view>
							</view>
							<view class="goshop-release-category-item-right" style="flex: 1;">
								 <u--input
								    class="goshop-release-price"
								    :placeholder="fillpriceText"
									v-model="form.price"
								    border="none"
								  ></u--input>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-p-10">
				<u-button type="error" @click="submitForm" :text="publishnowText"></u-button>
			</view>
		</view>
		<u-action-sheet :actions="categoryDataList" @close="selectCategoryClose" :title="categoryTitle" @select="selectCategoryClick" :show="showCategory" :closeOnClickOverlay="true" :closeOnClickAction="true" ></u-action-sheet>
	</view>
</template>

<script>
	import {categoryList,goodInfo,createGood,updateGood} from '@/common/http.api.js'
	import config from '@/common/config';
	import {isEmpty,isNotEmpty} from '@/utils/utils';
	export default {
		data() {
			return {
				bgColor: '#ff5d50',
				title:'',
				categoryTitle:'',
				showCategory: false,
				fileList: [],
				categoryDataList:[],
				selectCategory:'',
				form:{
					id:'',
					categoryId:'',
					content:'',
					name:'',
					imgs:[],
					freight:0,
					price:'',
				},
				priceText:'',
				descText:'',
				categoryerrText:'',
				updateText:'',
				publishnowText:'',
				categoryText:'',
				successText:'',
				imgnotemptyText:'',
				categorynotemptyText:'',
				titlenotemptyText:'',
				fillpriceText:'',
				filltitleText:'',
				pricenotemptyText:'',
				uploadloadingText:'',
				chooseText:'',
				locale:'',
			};
		},
		onLoad(e){
			this.getCategoryList();
			if(e.id){
				this.title = this.$t('releasegood.edititem.text');
				this.form.id=e.id;
				this.getInfo();
			}
		},
		onShow(){
		  this.refresh();
		  this.locale = this.$i18n.locale;
		},
		methods:{
			refresh(){
				this.title = this.$t('releasegood.postanitem.text');
				this.categoryTitle = this.$t('releasegood.selcategory.text');
				this.chooseText = this.$t('common.choose.text');
				this.priceText = this.$t('releasegood.price.text');
				this.descText = this.$t('releasegood.desc.text');
				this.categoryerrText = this.$t('releasegood.categoryerr.text');
				this.updateText = this.$t('releasegood.update.text');
				this.publishnowText = this.$t('releasegood.publishnow.text');
				this.categoryText = this.$t('releasegood.category.text');
				this.successText = this.$t('releasegood.success.text');
				this.imgnotemptyText = this.$t('releasegood.imgnotempty.text');
				this.categorynotemptyText = this.$t('releasegood.categorynotempty.text');
				this.titlenotemptyText = this.$t('releasegood.titlenotempty.text');
				this.fillpriceText = this.$t('releasegood.fillprice.text');
				this.filltitleText = this.$t('releasegood.filltitle.text');
				this.pricenotemptyText = this.$t('releasegood.pricenotempty.text');
				this.uploadloadingText = this.$t('common.uploadloading.text');
			},
			selectCategoryClick(index){
				this.form.categoryId = index.id;
				this.selectCategory = index.name;
			},
			selectCategoryClose(){
			    this.showCategory = false;
			},
			getCategoryList(){
				let that = this;
				categoryList().then(res => {
					if (res.code === 0) {
						this.categoryDataList = res.data;
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.categoryerrText,
							type: 'error',
						})
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: that.uploadloadingText
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let json = JSON.parse(result);
					if(json.code === 0){
						this.form.imgs.push(json.data);
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: json.data
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/app/common/upload',
						filePath: url,
						name: 'file',
						header: {
							"tenant-id": config.tenantId //token校验
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						complete: (res)=>{
							let json = JSON.parse(res.data);
							if(json.code != 0){
								this.fileList.splice(this.fileList.length-1, 1)
								this.$refs.uToast.show({
									message: json.msg,
									type: 'error',
								})
							}
						}
					});
				})
			},
			getInfo(){
				goodInfo({params: {id: this.form.id,locale:this.locale}}).then(res => {
					if (res.code === 0) {
						this.form = res.data;
						if(isNotEmpty(this.form.categoryName)){
							this.selectCategory = this.form.categoryName;
						}
						for (let i = 0; i < this.form.imgs.length; i++) {
							let imgUrl = this.form.imgs[i];
							this.fileList.push( {
								status: 'success',
								message: '',
								url: imgUrl
							});
						}
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			submitForm(){
				let that = this;
				if(isEmpty(this.form.categoryId)){
					this.$refs.uToast.show({
						message: that.categorynotemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.name)){
					this.$refs.uToast.show({
						message: that.titlenotemptyText,
						type: 'error',
					})
					return;
				}
				if(this.form.imgs === 0){
					this.$refs.uToast.show({
						message: that.imgnotemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.price)){
					this.$refs.uToast.show({
						message: that.pricenotemptyText,
						type: 'error',
					})
					return;
				}
				if(this.form.id){
					updateGood(this.form).then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								message: that.updateText,
								type: 'success',
								complete() {
									uni.redirectTo({
										url: 'pages/common/order/published'
									})
								}
							})
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
				}else{
					createGood(this.form).then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								message: that.successText,
								type: 'success',
								complete() {
									uni.redirectTo({
										url: 'pages/common/order/published'
									})
								}
							})
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.goshop-release-container{

}
/deep/.uni-input-wrapper .uni-input-input {
    text-align: right;
}
.goshop-release-upload{
	padding: 20rpx 20rpx 0 20rpx;
	background: $goshop-color-auxiliary-one;
}
.goshop-release-navbar{
	height: 88rpx;
}
.goshop-release-category{
	padding: 20rpx;
	background: $goshop-color-auxiliary-one;
	.goshop-release-category-list{
		.goshop-release-category-item{
			padding: 20rpx 0;
			//height: 80rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid $goshop-text-color-three;
			.goshop-release-category-item-left{
				display: flex;
				flex: 3;
				align-items: center;
			}
			.goshop-release-category-item-right{
				//flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
}
</style>
